<template>
	<view class="login-page">
		<view class="head">
			<text class="hello">您好</text>
			<view class="wellcome">
				欢迎登陆
			</view>
		</view>
		<view class="login-box">
			<view class="item">
				<view class="title">
					账号
				</view>
				<view class="input-box account">
					<view class="code">+86</view>
					<input class="inp" type="number" v-model="account.username" placeholder="请输入手机号"
						@focus="changeAccountVal" />
					<image class="clean-icon" src="@/static/img/login/clean.png" v-if="isShowClearAccountIcon"
						@click="cleanAccountVal"></image>
				</view>
			</view>
			<view class="item">
				<view class="title">
					密码
				</view>
				<view class="input-box pwd">
					<input class="inp" :password="!isShowPwd" placeholder="请输入密码" v-model="account.password"
						@focus="changePwdVal" />
					<block v-if="isShowClearPwdIcon">
						<image class="clean-icon" src="@/static/img/login/clean.png" @click="cleanPwdVal"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd.png" v-if="!isShowPwd"
							@click="changShowPwd"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd-show.png" v-else @click="changShowPwd">
						</image>
					</block>
				</view>
			</view>
			<view class="forgot-pwd">
				<text @click="goForgotPwd">忘记密码？</text>

			</view>
			<Button3 @click="login">立即登录</Button3>
		</view>
		<!-- 提示弹窗 -->
		<messageTip ref="myMessage" />

	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { useUserStore, useConsumptionStore } from '@/stroes';
	import Button3 from '@/components/button3/button3.vue';
	import * as loginApi from '@/api/login/login'
	import * as consumptionApi from '@/api/consumption/consumption'
	import * as driverApi from '@/api/drivers/driver'
	import * as orderTakingApi from "@/api/drivers/orderTaking.js"
	/* 	setTimeout(() => {
			uni.navigateTo({
				url: '/pages/drivers/orderTakingCenter/orderTakingCenter'
			})
		}, 1000) */
	uni.showModal({
		title: '提示',
		content: '当前应用需要获取当前定位信息',
		success() {
			uni.getLocation({
				type: 'gcj02', // 定位坐标系，默认为 wgs84，也可以是 gcj02
				success: function (res) {
					console.log('当前位置的经度为：' + res.longitude);
					console.log('当前位置的纬度为：' + res.latitude);
				},
				fail: function (err) {
					console.error('获取位置失败', err);
					uni.showToast({
						title: err.errMsg
					})
				}
			});
		}, fail() {
			if (plus) {
				plus.runtime.quit();
			}
		}
	})
	// 消息提示
	const myMessage = ref()
	// 用户信息仓库
	const userStore = useUserStore()
	// 消纳端仓库
	const consumptionStore = useConsumptionStore()
	// userStore.userInfo = { name: '王五', age: 20, role: 'user', token: 'aaa' }

	// 是否显示清空账号值图标
	const isShowClearAccountIcon = ref(false)
	// 是否显示清空密码图标
	const isShowClearPwdIcon = ref(false)
	// 是否显示loading按钮
	const isShowLoading = ref(false)
	// 是否明文显示密码
	const isShowPwd = ref(false)
	// 账号信息
	const account = reactive({
		// 管理员账号
		/* username: '18428108733',
		password: 'sandadmin2024', */

		// 消纳端人员账号
		// 原料区---4
		/* username: '13541293876',
		password: '123456', */
		// 生产区---5
		/* username: '13541293877',
		password: '123456', */
		// 成品区---6
		/* username: '13541293878',
		password: '123456' */


		// // 司机端账号
		/* username: '17605912974',
		password: '123456', */
		username: '13541293876',
		password: '123456'
	})
	// 改变账号值
	const changeAccountVal = () => {
		isShowClearAccountIcon.value = true;
		isShowClearPwdIcon.value = false;
	}
	// 清除账号值
	function cleanAccountVal() {
		account.username = ''
	}
	// 改变密码值
	const changePwdVal = () => {
		isShowClearAccountIcon.value = false;
		isShowClearPwdIcon.value = true;
	}
	// 清空密码的值
	const cleanPwdVal = () => {
		account.password = ''
	}
	// 显示隐藏密码
	const changShowPwd = () => {
		isShowPwd.value = !isShowPwd.value
	}

	// 登录
	function login() {
		if (account.username == '' || account.password == '') {
			return myMessage.value.open('error', '请将信息填写完整')
		}
		uni.showLoading({
			title: '登录中'
		});

		loginApi.doLogin({
			...account,
			code: '',
			randomStr: 'f4444d28-5110-4594-a6a2-c153666f235d',
			'grant_type': 'password',
			scope: 'server',
			'phone_type': 'phone_password'
		}).then(async res => {
			/* console.log('kkkk淡淡的点点滴滴滴滴滴滴', res);
			return */
			try {

				if (res.data) {
					if (res.data.code && res.data.code == 1) {
						uni.hideLoading();
						myMessage.value.open('error', res.data.msg)
						return
					}
					userStore.accountInfo = res.data;
					// 根据用户id获取消纳场列表
					const res1 = await consumptionApi.getTerminalByUserId(res.data['user_id'])
					if (res1.data.code == 0) {
						consumptionStore.venueList = res1.data.data
						consumptionStore.nowVenue = res1.data.data[0]
					}
					const res2 = await loginApi.getBusinessList({ userId: res.data['user_id'] })
					const data2 = res2 && res2.data
					// console.log(res2, 'uuuuuuuu');
					/* console.log('端信息', data2);
					return */
					uni.hideLoading();
					if (data2 && data2.code == 0) {

						// 当前显示页面id
						userStore.nowPageId = 0
						// 当前起点区域
						userStore.fieldArea = data2.data.fieldArea
						// fieldArea 4--原料区  5--生产区  6--成品区
						// userStore.fieldArea = '5'

						userStore.endTypeList = data2.data.roles
						if (data2.data.roles.length > 1) {
							uni.navigateTo({
								url: '/pages/businessPage/businessPage'
							})
						} else {
							userStore.nowEndType = data2.data.roles[0]
							if (userStore.nowEndType?.roleCode === 'driver') {
								driverApi.getCartsList().then(res => {
									if (res.data && res.data.code === 0) {
										userStore.cartList = res.data.data;
										if (userStore.cartList.length) {
											if (userStore.cartList.length > 1) {
												uni.navigateTo({
													url: '/pages/drivers/selectCart/selectCart?type=1'
												})
											} else {
												// orderTakingApi.bindVehicle({ plateNo: activeCart.value.hphm,}).then(res => {})
												userStore.nowCart = userStore.cartList[0]
												orderTakingApi.bindVehicle({ plateNo: userStore.nowCart?.hphm, }).then(res => {
													if (res.data.code === 0) {
														uni.switchTab({
															url: '/pages/index/index'
														})
													} else {
														myMessage.value.open('error', res.data.msg)
													}

												})

												console.log("userStore.cartList[0]", userStore.cartList[0])
											}
										} else {
											myMessage.value.open('error', '当前司机无可用车辆,请绑定以后再登录')
										}
									}
								})
							} else {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					}
					// } else {
					// 	console.log(res, 'yyyyyyyyyyyyy');
					// 	uni.hideLoading();
					// 	myMessage.value.open('error', res.data.msg)

					// }

				} else {
					console.log(res, 'yyyyyyyyyyyyy');
					uni.hideLoading();
					myMessage.value.open('error', res.data.msg)

				}
			} catch (e) {
				console.log(e, 'kkkkkk');
				uni.hideLoading();
			}
		}).finally(() => {
			isShowLoading.value = false;

		})

	}

	// 重置表单
	function resetForm() {
		account.username = ''
		account.password = ''
	}
	// 去忘记密码页面
	function goForgotPwd() {
		uni.navigateTo({
			url: '/pages/forgotPwd/forgotPwd'
		})
	}
	onMounted(() => {
		// resetForm()
	})
</script>

<style lang="scss">
	.login-page {
		.head {
			display: flex;
			padding-left: 48rpx;
			align-items: center;
			height: 576rpx;
			background: url('@/static/img/login/head-bg.png') no-repeat no-repeat center/ 100% 100%;

			.hello {
				font-size: 56rpx;
				font-weight: 600;
				color: #000;
				line-height: 66rpx;
				margin-right: 15rpx;
			}

			.wellcome {
				width: 227rpx;
				height: 72rpx;
				font-size: 40rpx;
				font-weight: 500;
				color: #fff;
				line-height: 72rpx;
				text-align: center;
				background: url('@/static/img/login/tip-bg.png') no-repeat no-repeat center/ 100% 100%;

			}
		}

		.login-box {
			margin-top: -156rpx;
			padding: 48rpx;
			border-radius: 32rpx;
			background-color: #fff;

			.item {
				margin-bottom: 32rpx;

				.title {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000;
				}

				.input-box {
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					height: 96rpx;
					font-size: 28rpx;
					border-radius: 8rpx;
					background-color: rgba(208, 215, 228, 0.2);
					box-sizing: border-box;

					&.pwd {
						.clean-icon {
							margin-right: 22rpx;
						}
					}

					.code {
						margin-right: 20rpx;
						padding-right: 20rpx;
						color: #989DA5;
						border-right: 2rpx solid #989DA5;
					}

					.inp {
						flex: 1;
					}

					.clean-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 84rpx;
					}

					.pwd-icon {
						width: 36rpx;
						height: 42rpx;
						margin-right: 26rpx;
					}


				}

			}

			.forgot-pwd {
				margin-bottom: 48rpx;
				color: $primary-color;
				text-align: right;
			}
		}
	}
</style>